<template>
  <div class="container">
    <h1>学员管理</h1>
    <el-divider></el-divider>
    <el-form
      ref="sutdentForm"
      :rules="rules"
      :model="formData"
      class="form"
      label-width="80px"
    >
      <el-form-item prop="name" label="学员姓名">
        <el-input v-model="formData.name" placeholder="学员姓名"></el-input>
      </el-form-item>
      <el-form-item prop="tel" label="学员电话">
        <el-input v-model="formData.tel" placeholder="学员电话"></el-input>
      </el-form-item>
      <el-form-item prop="remark" label="学员备注">
        <el-input v-model="formData.remark" placeholder="学员备注"></el-input>
      </el-form-item>
      <el-button type="primary" @click="submit">立即添加</el-button>
      <el-button type="default" @click="reset">取消</el-button>
    </el-form>
    <el-divider></el-divider>
    <el-table border :data="list">
      <el-table-column prop="id" label="序号" min-width="80"></el-table-column>
      <el-table-column
        prop="name"
        label="学员姓名"
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="tel"
        label="学员电话"
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="remark"
        label="学员备注"
        min-width="180"
      ></el-table-column>
      <el-table-column label="操作" min-width="180">
        <!-- props: 自定义模板变量, 用来接收作用域插槽分发的数据 -->
        <template v-slot="props">
          <el-button @click="del(props.$index)" type="danger" size="small" round
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    // 表单校验规则对象
    const rules = {
      name: { required: true, message: "请输入学员姓名", trigger: "blur" },
      tel: { required: true, message: "请输入学员电话", trigger: "blur" },
      remark: { required: true, message: "请输入学员备注", trigger: "blur" },
    };

    // 表单数据对象
    const formData = reactive({
      name: "",
      tel: "",
      remark: "",
    });

    // 学员列表
    const list = reactive([
      { id: 1, name: "张三", tel: 10086, remark: "学霸" },
      { id: 2, name: "李四", tel: 10010, remark: "学渣" },
    ]);

    return {
      list,
      formData,
      rules,
      // index: 待删除的学员索引
      del(index) {
        //   console.log(index);
        // 通过索引删除学员信息
        list.splice(index, 1);
      },
      // 重置表单元素
      reset() {
        formData.name = "";
        formData.tel = "";
        formData.remark = "";
      },
    };
  },
  methods: {
    submit() {
      // 提交表单之前进行终极表单校验
      this.$refs.sutdentForm.validate((valid) => {
        if (valid) {
          // 手动计算一个学员id
          const len = this.list.length;
          const id = len > 0 ? this.list[len - 1].id + 1 : 1;
          // 构造学员对象
          const obj = { ...this.formData, id };
          // 将学员对象追加到学员列表数组的末尾
          this.list.push(obj);
          // 表单重置
          this.reset();
        }
      });
    },
  },
};
</script>

<style>
.container {
  width: 1000px;
  margin: auto;
}
</style>